﻿@page "/tabs"

<PageTitle Title="标签(BootTabControl)">
    标签组件提供了切换的方式对内容进行呈现，而节约了更多的空间。
</PageTitle>

<PresentationPart Title="简单示例">
    <RunTemplate>
        <BootTabControl>
            <BootTabControlPage Title="首页">
                Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
            </BootTabControlPage>
            <BootTabControlPage Title="资料">
                Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
            </BootTabControlPage>
            <BootTabControlPage Title="联系人">
                Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
            </BootTabControlPage>
        </BootTabControl>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootTabControl>
    <BootTabControlPage Title=""首页"">
        Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo
        anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim
        aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
    </BootTabControlPage>
    <BootTabControlPage Title=""资料"">
        Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt
        amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt
        elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit
        adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
    </BootTabControlPage>
    <BootTabControlPage Title=""联系人"">
        Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex.
        Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam.
        Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo
        aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute
        veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do
        mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor
        irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco
        sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit
        voluptate voluptate consequat non.
    </BootTabControlPage>
</BootTabControl>
```
");
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="药丸样式">
    <Description>
        设置 <code>Pills="true"</code> 让标签页呈现药丸风格的样式。
    </Description>
    <RunTemplate>
        <BootTabControl Pills="true">
            <BootTabControlPage Title="首页">
                Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
            </BootTabControlPage>
            <BootTabControlPage Title="资料">
                Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
            </BootTabControlPage>
            <BootTabControlPage Title="联系人">
                Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
            </BootTabControlPage>
        </BootTabControl>
    </RunTemplate>
    <CodeTemplate>

        @Code.GetCode(@"
```html
<BootTabControl Pills=""true"">
    <BootTabControlPage Title=""首页"">
        Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo
        anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim
        aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
    </BootTabControlPage>
    <BootTabControlPage Title=""资料"">
        Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt
        amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt
        elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit
        adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
    </BootTabControlPage>
    <BootTabControlPage Title=""联系人"">
        Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex.
        Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam.
        Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo
        aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute
        veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do
        mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor
        irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco
        sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit
        voluptate voluptate consequat non.
    </BootTabControlPage>
</BootTabControl>
```
");
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="OnActived 事件">
    <RunTemplate>
        <BootTabControl>
            <BootTabControlPage Title="选项卡1" OnActived="@(()=>_js.InvokeVoidAsync("alert","激活第1个选项卡"))">
                第一个选项卡
            </BootTabControlPage>
            <BootTabControlPage Title="选项卡2" OnActived="@(()=>_js.InvokeVoidAsync("alert","激活第2个选项卡"))">
                第二个选项卡
            </BootTabControlPage>
        </BootTabControl>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
@inject IJSRuntime _js

<BootTabControl>
    <BootTabControlPage Title=""选项卡1"" OnActived=""@(() => _js.InvokeVoidAsync(""alert"", ""激活第1个选项卡""))"">
        第一个选项卡
    </BootTabControlPage>
    <BootTabControlPage Title=""选项卡2"" OnActived=""@(()=>_js.InvokeVoidAsync(""alert"",""激活第2个选项卡""))"">
        第二个选项卡
    </BootTabControlPage>
</BootTabControl>
```
        ")
    </CodeTemplate>
</PresentationPart>
@inject IJSRuntime _js

<ArgumentDescriptionTable Title="属性">
    <tr>
        <td>Pills</td>
        <td>Boolean</td>
        <td>设置一个布尔值，表示标签页是否使用药丸样式。</td>
    </tr>
    <tr>
        <td>Title</td>
        <td>String</td>
        <td>设置标签页面标题。</td>
    </tr>
</ArgumentDescriptionTable>

<ArgumentDescriptionTable Title="事件">
    <tr>
        <td>OnActived</td>
        <td>EventCallBack</td>
        <td>设置当标签页被激活时触发的事件。</td>
    </tr>
</ArgumentDescriptionTable>